<template>
    <div class="wrop flex fdc fg1">
        <h1 class="mb-30">Meuns</h1>
        <div class="wrop-content fg1">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="Edit Menus">
                    <a-alert
                        description="Edit your menu below, or create a new menu. Don’t forget to save your changes!"
                        type="info" show-icon />
                    <div class="flex mt-20">
                        <div class="mr-20">
                            <h3>Add menu items</h3>
                            <!-- 折叠 -->
                            <div style="width:250px">
                                <a-collapse v-model:activeKey="activeKeyZd">
                                <a-collapse-panel key="1" header="Pages">
                                <p>1</p>
                                </a-collapse-panel>
                                <a-collapse-panel key="2" header="Posts">
                                <p>2</p>
                                </a-collapse-panel>
                                <a-collapse-panel key="3" header="Custom Links">
                                <p>3</p>
                                </a-collapse-panel>
                                <a-collapse-panel key="4" header="Categories">
                                <p>4</p>
                                </a-collapse-panel>
                            </a-collapse>
                            </div>
                        </div>
                        <div class="fg1 bs-right">
                            <h3 class="pr-10 pl-10">Menu structure</h3>
                            <div class="table-b ">
                                <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="table-b-top flex jc-sb hs">
                                        <a-form-item label="Menu Name">
                                            <a-input v-model:value="formState.name" />
                                        </a-form-item>
                                        <a-button type="primary">Save Menu</a-button>
                                    </div>
                                    <div class="table-b-centre">
                                        <p>Drag the items into the order you prefer. Click the arrow on the right of the item to reveal additional configuration options.</p>
                                    </div>
                                    <div class="table-b-bottom">
                                        <h3>Menu Settings</h3>
                                    </div>
                                    <div class="table-b-foot flex jc-sb pr-10 pl-10">
                                        <a-button type="primary" danger ghost>Delete Menu</a-button>
                                        <a-button type="primary">Save Menu</a-button>
                                    </div>
                                </a-form>
                            </div>
                        </div>
                    </div>

                </a-tab-pane>
                <a-tab-pane key="2" tab="Manage Locations">

                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script setup>
import { defineComponent, ref,reactive, toRaw  } from 'vue';
const activeKey = ref('1')
const activeKeyZd = ref(['']);
const formState = reactive({
    name: '',
    delivery: false,
    });
</script>

<style lang="less" scoped>
.wrop {
    background: #f1f1f1;
    
    &-content {

    }
}

.tabs-extra-demo-button {
    margin-right: 16px;
}

.ant-row-rtl .tabs-extra-demo-button {
    margin-right: 0;
    margin-left: 16px;
}
.bs-right{
    background: #ffff;
        .table-b{
            &-top{
                padding: 15px 10px 0px 10px  ;
            }
            &-centre{
                background: #ffff;
                padding:  10px;
                height: 300px;
            }
            &-bottom{
                border-top: 1px solid rgb(177, 177, 172);
                padding: 10px 0;
                margin: 0px 10px;
                & > h3{
                    
                }
            }
            &-foot{
                padding: 10px;
            }
        }
}
.hs{
    background: #edecec;
}

.ant-alert-info {
    background-color: #fff;
}
</style>